const path = require('path');
const { VueLoaderPlugin } = require('vue-loader');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const htmlWebpackPlugin = require("html-webpack-plugin")

module.exports = {
    entry: './src/index.js',
    output: {
        // path可以不写，写的话要拼接成绝对路径
        path: path.join(__dirname, './dist'),
        filename: 'bundle.js',
    },
    mode: 'development',
    // 专门用来放devServer配置
    devServer: {},
    module: {
        rules: [{
                test: /\.css$/,
                use: ['style-loader', 'css-loader'],
                exclude: /node_modules/,
            }, {
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader'],
                exclude: /node_modules/,
            }, {
                test: /\.ttf|woff|woff2|eot|svg$/,
                use: ['url-loader']
            },
            {
                test: /\.js$/,
                exclude: /node_modules/, // 要排除
                use: {
                    loader: 'babel-loader',
                    options: {
                        // 启用缓存
                        cacheDirectory: true,
                        // 禁用模块语句从ES6 Module转化为 CommonJS，把ES6语法交给webpack处理
                        "presets": [
                            ["@babel/preset-env", { modules: false }]
                        ],
                        "plugins": [
                            "@babel/plugin-transform-runtime",
                            "@babel/plugin-transform-regenerator", ["@babel/plugin-transform-modules-commonjs", { "strictMode": false }]
                        ],
                        // "ignore": ["./lib/mui/js/mui.js"],
                    }
                }
            }, {
                test: /\.vue$/,
                use: ['vue-loader']
            }, {
                test: /\.jpg|png|gif|bmp$/,
                use: 'url-loader'
            }
        ]
    },
    plugins: [
        // 请确保引入这个插件！
        new VueLoaderPlugin(),
        // new ExtractTextPlugin('bundle.css')
        new MiniCssExtractPlugin({
            filename: '[name].css',
            chunkFilename: '[id].css'
        }),
        new htmlWebpackPlugin({
            // 创建一个在内存中生成HTML页面的插件
            // 这里指定模板页面，将来会根据指定的页面路径去生成内存中的页面
            template: path.join(__dirname, "./src/index.html"),
            filename: "index.html"
        }),
    ]
}